<template>
  <div>
    <h3>
      !!!模拟按钮权限,由于这个项目后端没有返回按钮权限列表,直接使用本地存储来模拟按钮权限了
    </h3>
    <el-table :data="tableData" style="width: 100%">
      <el-table-column label="姓名" width="180">
        <template slot-scope="scope">
            <p>{{ scope.row.name }}</p>
        </template>
      </el-table-column>
       <el-table-column label="住址" width="180">
        <template slot-scope="scope">
            <p>{{ scope.row.address }}</p>
        </template>
      </el-table-column>
      <el-table-column label="操作">
        <template>
          <el-button size="mini" type="primary" v-hasMenu="'creat'">新增</el-button>
          <el-button size="mini" type="success" v-hasMenu="'edit'">修改</el-button>
          <el-button size="mini" type="danger" v-hasMenu="'del'">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>
      

<script>
import hasMenu from "@/utils/hasMenu";
export default {
 //自定义指令局部引入  directives: { hasMenu },  全局指令 Vue.directives('名字',{bind(el,bindings){},inserted(el, bindings) })
  data() {
    return {
      tableData: [
        {
          name: "王小虎1",
          address: "上海市",
        },
        {
          name: "王小虎2",
          address: "北京市",
        }
      ],
    };
  },
  created() {
    //模拟登录后端返回的按钮权限列表
     let arr = ["creat","edit"];
     localStorage.setItem('permission',JSON.stringify(arr))
  },
  mounted() {
    
  },
  methods: {},
  computed: {},
  watch: {},
  //局部自定义指令
  // directives:{
	// 		'hasMenu':{//起个名字
	// 		    bind(el,binding){  //执行时机页面没有挂载dom时，就执行,比data早，比created晚
  //           // console.log(el,binding.value)
  //           let arr=JSON.parse(localStorage.getItem('permission'))
  //           let bl=arr.includes(binding.value) 
  //           if(!bl){
  //               el.style.display='none'
  //               //因为dom元素获取不到,所以变成异步后在获取
  //               setTimeout(()=>{
  //                 el.parentNode.removeChild(el)
  //               },0)
  //               // console.log(67,el.parentNode); //在外面获取不到dom元素
  //           }
  //         },
	// 		}
	// 	}
};
</script>

<style scoped lang='scss' >

</style>
